<template>
    <div class="container">
        <h2 class="title">
            <router-link to="/mine">
                <i class="el-icon-arrow-left">返回</i>
            </router-link>
            申请提现
        </h2>

        <div class="tips">
            <h2>充值前您必须【<b>详细阅读并遵守</b>】以下协议： </h2>
            <p>1.您在“盛煊推客”(以下简称“本平台”)中的充值，是您的自愿行为.</p>
            <p>2.本平台只有唯一充值入口.</p>
            <p>3.请不要相信任何第三方的充值优惠、折扣等信息.</p>
            <p>4.充值金额长期有效.</p>
            <p><b>5.充值成功后不退款、不转让、不折现、不计息.</b></p>
            <p>6.如有充值问题请联系平台客服.</p>
            <p>7.请妥善保管好您的账号等信息，如因账号信息泄露造成的任何损失，本平台概不负责.</p>
            <p>8.本平台拥有最终解释权.</p>
            <p><b>9.一旦充值，即视为您同意该协议.</b></p>
        </div>

        <el-form label-width="100px" :model="validForm" ref="validForm">

            <el-form-item label="充值金额" prop="charge" :rules="[
                { required: true, message: '充值金额不能为空'},
                { type: 'number', message: '充值金额必须为数字值'}
            ]">
                <el-input v-model.number="validForm.charge" placeholder="请输入有效的充值金额" clearable></el-input>
            </el-form-item>

            <el-row>
                <el-button type="primary" @click="submitForm('validForm')">提 现</el-button>
            </el-row>

        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                validForm: {
                    charge: '',
                }
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        return false
                    }
                })
            }
        },
    }
</script>

<style>
    .el-form {
        padding: 0 20px 20px;
    }

    .el-form-item {
        margin-bottom: 15px;
        border-bottom: 1px solid var(--border-line);
    }

    .el-form-item__label {
        font-size: var(--font-sm-size);
    }

    .el-input__inner {
        font-size: var(--font-sm-size);
        border-radius: 0;
        border: none;
    }

    .el-input.is-disabled .el-input__inner {
        background-color: transparent;
        color: var(--color-mdjor)
    }

    /************************************
     * submit button
     ***********************************/
    .container .el-row {
        margin-top: 25px;
    }

    .el-button {
        width: 100%;
    }
</style>

<style scoped>
    .container {
        background-color: #FFF;
    }

    .tips {
        margin: 15px 20px 5px;
        padding: 15px;
        padding-top: 10px;
        padding-right: 0;
        border: 1px solid #fef0f0;
        border-radius: 5px;
        background-color: #fef0f0;
        color: var(--color-mdjor);
    }
    .tips h2{
        padding-bottom: 7px;
    }

    .tips p {
        font-size: var(--font-sm-size);
        line-height: 22px;
    }

    .tips b {
        color: #F56C6C;
        font-size: var(--font-sm-size);
    }

    .title {
        background-color: #e5e5e5;
        padding: 12px 0;
        text-align: center;
        border-bottom: 1px solid var(--border-line);
    }

    .title i {
        position: fixed;
        top: 0;
        left: 20px;
        width: 45px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        color: var(--color-theme)
    }
</style>